<template>
    <div class="registrationSettings">
         <el-tabs
            v-model="types" v-if="menuItem.length > 0"
            class="custom-tabs"
            >
            <el-tab-pane
            v-for="tab in menuItem"
            :key="tab.perms"
            :label="tab.menuName"
            :name="tab.perms"
            >
            </el-tab-pane>
        </el-tabs>
        
        <div class="registartionSettings-content">
            <div class="registrationSettings-item" v-if="types === 'manage-registrationSettings-empSchedule'">
                <scheduling />

            </div>
            <div class="registrationSettings-item" v-if="types === 'manage-registrationSettings-dict'">
                <configForm />

            </div>
            <div class="registrationSettings-item" v-if="types === 'manage-registrationSettings-shift'">
                <shift />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import configForm from './configForm/index.vue';
    import scheduling from './scheduling/index.vue';
    import shift from './shift/index.vue'
    const list = ref<any[]>([])
    import stores from '@/store';
    const route = useRoute();
    const query = route.query;
   //菜单权限
    let menuList = ref<any>( await stores.useBaseDataStore().findMenuList(route.query.submenuId));

    menuList.value.filter((item:any) => {
        return  item.menuType == 2;
    })
    let menuItem = ref<any>(menuList.value);
    const types = ref<string>(menuItem.value[0].perms); // 默认选中标签

    const parentMethod = (e:string) => {
        //console.log('父组件方法被调用',e);
        types.value = e
    };
</script>
<style lang="scss" scoped>
    .registrationSettings{
        ::v-deep(.el-tabs__item) {
        width: 110px !important; /* 设置每个tab的宽度 */
        padding: 0 !important; /* 去除默认padding */
        font-size: 16px !important; /* 设置字体大小 */
        }
        ::v-deep(.el-tabs__nav-wrap:after){
            height: 1px !important;
        }
    }   
</style>